<template>
	<div
		:class="{
			timeLineWrapper: true,
			
		}"
	>	
		<!-- wrapperHide: showTop,
			wrapperShow: !showTop -->
		<div class="kaihuaThirty">
            <div></div>
        </div>
		<div class="timeContent">
			<div class="control">
				<i
					class="cursor-pointer"
					id="prevBtn"
					:class="{
						fa: true,
						'el-icon-caret-left': true,
						clickActive: isPrev
					}"
					title="上一个"
					@click="clickPre"
				></i>
				<i
					class="cursor-pointer"
					id="controlBtn"
					:class="{
						fa: true,
						'el-icon-video-pause': !isPause,
						clickActive: isPause,
						'el-icon-video-play': isPause
					}"
					title="播放/暂停"
					@click="clickPause"
				></i>
				<i
					class="cursor-pointer"
					id="nextBtn"
					:class="{
						fa: true,
						'el-icon-caret-right': true,
						clickActive: isNext
					}"
					title="下一个"
					@click="clickNext"
				></i>
			</div>

			<div class="progress">
				<ul class="sliderBlock">
					<li v-for="(item, index) in blockArr" :key="index">
						<span
							:class="{
								hasArrive: index < curIndex && curIndex != 0,
								noArrive: index > curIndex || index == curIndex
							}"
						>
							<span @click="chooseDate(index)" style="cursor:pointer; "></span>
							<span @click="chooseDate(index + 1)" style="cursor:pointer" v-if="index == blockArr.length - 1"></span>
						</span>
						<span>
							<i class="i-before">{{ item }}</i>
							<i v-if="index == blockArr.length - 1" class="i-last">{{ scaleArr[scaleArr.length - 1] }}</i>
						</span>
					</li>
				</ul>
				<!-- <div class="text" v-if="isArrive" :style="{left: textVal + 'px'}">{{scaleArr[3]}}</div> -->
				<div class="text" v-if="isArrive" :style="{ left: textVal + 'px' }">
					{{ scaleArr[curIndex] }}
				</div>
				<span class="slider" v-if="isArrive" :style="{ left: sliderVal + 'px' }">
					{{scaleArr[curIndex]}}
				</span>
			</div>
		</div>
		<div class="yearCompear" @click="doubelEarthCompare" >
			<span class="yearBtn">{{duibinian}}</span>
			<!-- <el-dropdown @command="handleCommand">
				<span class="el-dropdown-link">
					选择影像<i class="el-icon-arrow-down el-icon--right"></i>
				</span>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item v-for="(item,index) of allArr" :key="index" :command="item.date">{{item.date}}</el-dropdown-item>
				</el-dropdown-menu>v-show="compareState"
			</el-dropdown> -->
		</div>
		
		<div  class="textTips" v-if="isTextTips">
			<div class="picTextBefore">{{scaleArr[curIndex]}}</div>
			<div class="picTextAfter">
				<el-dropdown class="picTextBtn" @command="handleCommand">
					<span class="el-dropdown-link">
						{{year}}<i class="el-icon-arrow-down el-icon--right"></i>
					</span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item v-for="(item,index) of allArr" :key="index" :command="item.date">{{item.date}}</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</div>
		</div>
	</div>
</template>
<script>
import DoubleSceneCompare from "./DoubleSceneCompare"
const layerUrl = "http://192.168.4.120:8310/geoserverplus/gwc/service/wms";
const yearLayers = [
	"icenter:开化县2019-PNG-4326",
	"icenter:开化县2018-PNG-4326",
	"icenter:开化县2017-PNG-4326",
	"icenter:开化县2016-PNG-4326",
	"icenter:开化县2014-PNG-4326",
	"icenter:开化县2013-PNG-4326",
	"icenter:开化县2012-PNG-4326",
	"icenter:开化县2011-PNG-4326",
	"icenter:开化县2010-PNG-4326",
	"icenter:开化县2005-PNG-4326",
	"icenter:开化县2000-PNG-4326",
	"icenter:开化县1995-PNG-4326",
	"icenter:开化县1990-PNG-4326"
].reverse()
const currentLayer = new Cesium.WebMapServiceImageryProvider({
	url: `http://192.168.4.120:8310/geoserverplus/gwc/service/wms`,
	layers: 'icenter:开化县2019-PNG-4326',
	parameters: {
		format: 'image/png'
	},
	srs: 'EPSG:4326'
});
let leftImageryLayer = null;
let rightImageryLayer = {
	rightImageryLayer1990:null,
	rightImageryLayer1995:null,
	rightImageryLayer2000:null,
	rightImageryLayer2005:null,
	rightImageryLayer2010:null,
	rightImageryLayer2011:null,
	rightImageryLayer2012:null,
	rightImageryLayer2013:null,
	rightImageryLayer2014:null,
	rightImageryLayer2016:null,
	rightImageryLayer2017:null,
	rightImageryLayer2018:null,
	rightImageryLayer2019:null
};
// import earthLayer from "@/utils/earthLayer"
// import { imageryLayerService } from './../api/baseUrl'
export default {
	name: 'timeBar',
	data() {
		return {
			duibinian:"对比年",
			isTextTips:false,
			year:"选择年份",
			isPrev: false,
			isPause: true,
			isNext: false,
			//刻度线
			scaleArr: [],
			blockArr: [],
			curIndex: 0,
			startIndex: -1,
			interval: '',
			imageryArr: [],
			isArrive: false,
			leftVal: -6,
			textVal: 0,
			sliderVal: 0,
			showTop: false,
			allArr: [
				{
					date: '1990'
				},
				{
					date: '1995'
				},
				{
					date: '2000'
				},
				{
					date: '2005'
				},
				{
					date: '2010'
				},
				{
					date: '2011'
				},
				{
					date: '2012'
				},
				{
					date: '2013'
				},
				{
					date: '2014'
				},
				{
					date: '2016'
				},
				{
					date: '2017'
				},
				{
					date: '2018'
				},
				{
					date: '2019'
				}
			],
			dataArr: [],
			layerArr: [],
			interval1: '',
			blackIndex: -1,
			globalIndex: -1,
			showTimeBar: false,
			currentLayer:null,
			compareState:false
		}
	},
	computed: {},
	watch: {},
	created() {
		let that = this
		setTimeout(() => {
			that.dataArr = this.allArr
			//.slice(0, 8)
			that.scaleArr = []
			for (let item of this.dataArr) {
				let obj = this.getData(item)
				this.scaleArr.push(item.date)
				this.layerArr.push(obj)
			}
			let len = this.scaleArr.length
			this.blockArr = this.scaleArr.slice(0, len - 1)
		}, 500)
	},
	mounted() {
		this.clickPause()
		this.$cp.flyTo(118.34419433834043,28.56285253571389,105594,6.23093119148499,-1.0038469512489798,0.0004426128132433149)
		//this.doubelEarthCompare();
		this.leftCompareRight(true)
		// this.allArr.forEach((item,index)=>{
		// 	rightImageryLayer["rightImageryLayer"+item.date] = viewer.imageryLayers.addImageryProvider(
		// 		new Cesium.WebMapServiceImageryProvider({
		// 			url: layerUrl,
		// 			layers: 'icenter:开化县1990-PNG-4326',
		// 			parameters: {
		// 				format: 'image/png'
		// 			},
		// 			srs: 'EPSG:4326'
		// 		})
		// 	)
		// 	rightImageryLayer["rightImageryLayer"+item.date].alpha=1
		// 	rightImageryLayer["rightImageryLayer"+item.date].splitDirection = Cesium.ImagerySplitDirection.RIGHT
		// })
		//document.getElementById("rightViewerContainer").style.width = "calc(50% - 2px)"
	},
	methods: {
		showSP(){
			

		},
		init() {
			this.dataArr = this.allArr.slice(0, 8)
			this.scaleArr = []
			this.layerArr = []
			for (let item of this.dataArr) {
				let obj = this.getData(item)
				this.scaleArr.push(item.date)
				this.layerArr.push(obj)
			}
			let len = this.scaleArr.length
			this.blockArr = this.scaleArr.slice(0, len - 1)
		},
		getData(item) {
			let obj = {
				date: item.date
			}
			return obj
		},
		chooseDate(index) {
			let that = this;
			this.isArrive = true
			this.curIndex = index
			this.startIndex = index
			this.moveSlider(this.curIndex)
			if(this.isTextTips){
				console.log("清除")
				viewer.imageryLayers.remove(leftImageryLayer)
				viewer.imageryLayers.remove(this.currentLayer)
				leftImageryLayer = viewer.imageryLayers.addImageryProvider(
					new Cesium.WebMapServiceImageryProvider({
						url: layerUrl,
						layers: 'icenter:开化县'+ that.scaleArr[that.curIndex] +'-PNG-4326',//that.curIndex
						parameters: {
							format: 'image/png'
						},
						srs: 'EPSG:4326'
					})
				)
				// 左侧显示图像图层
				leftImageryLayer.splitDirection = Cesium.ImagerySplitDirection.LEFT	
				return;
			}
			this.looping()
			
		},
		looping() {
			let j = ''
			if (this.blackIndex != -1 && this.blackIndex > this.min) {
				this.looping()
			}
			if (this.globalIndex != -1 && this.globalIndex > this.min) {
				this.looping()
			}
		},
		//看前面的  从头增加一个 从尾减少一个 保持3个
		clickNext() {
			this.toStop()
			if (this.curIndex < this.layerArr.length - 1 && this.curIndex > -1) {
				// 获取当前数据
				let date = this.dataArr[this.curIndex].date
				this.scaleArr = []
				this.dataArr.filter((value, index, arr) => {
					this.scaleArr.push(value.date)
				})
				let len = this.scaleArr.length
				this.blockArr = this.scaleArr.slice(0, len - 1)
				this.curIndex++
				this.isArrive = true
				this.moveSlider(this.curIndex)
				this.startIndex = this.curIndex
				this.looping()
			}
		},
		//暂停/播放
		clickPause() {
			this.isPause = !this.isPause
			if (this.isPause) {
				this.toStop();
			} else {
				this.looping()
				this.toStart()
			}
		},
		toStart() {
			this.animation()
		},
		toStop() {
			clearInterval(this.interval)
			this.interval = null
		},
		//看后面的 从头减少一个 从尾增加一个 保持3个
		clickPre() {
			this.toStop()
			if (this.curIndex > 0) {
				this.scaleArr = []
				this.dataArr.filter((value, index, arr) => {
					this.scaleArr.push(value.date)
				})
				let len2 = this.scaleArr.length
				this.blockArr = this.scaleArr.slice(0, len2 - 1)
				this.curIndex--
				if (this.curIndex < 0) {
					this.isArrive = false
				} else {
					this.isArrive = true
					this.moveSlider(this.curIndex)
					this.startIndex = this.curIndex
				}
				this.looping()
			} else {
				this.curIndex = 0
			}
		},
		moveSlider(num) {
			if(!this.isTextTips){
				this.changeLayer(num);
			}
			let text = document.getElementsByClassName('text')[0];
			let slider = document.getElementsByClassName('slider')[0];
			let htmlcollection = document.querySelector('.sliderBlock').children;
			//刻度点li
			let htmlArr = Array.from(htmlcollection)
			for (let i = 0; i <= htmlArr.length; i++) {
				if (i <= num) {
					if (i === num) {
						if (i == htmlArr.length) {
							this.textVal = -30 + 68 + htmlArr[i - 1].offsetLeft
							this.sliderVal = -23 + 68 + htmlArr[i - 1].offsetLeft
						} else {
							this.textVal = -30 + htmlArr[i].offsetLeft
							this.sliderVal = -23 + htmlArr[i].offsetLeft
						}
					}
				}
			}
		},
		changeLayer(num){
			viewer.imageryLayers.remove(this.$cp.labelProvider)
			if(num>8){
				this.$cp.flyTo(118.39341322897816,28.99915797637111,18225,6.230930837705717,-1.0038512577964207,0.0004430322093735839)
			}else{
				this.$cp.flyTo(118.45059582312886,28.716521080976644,64025,6.230930673225966,-1.0038532599810397,0.0004432271954559752)
			}
			if(this.currentLayer){
				viewer.imageryLayers.remove(this.currentLayer)
				
				this.currentLayer = null
			}
			this.currentLayer =viewer.imageryLayers.addImageryProvider(
				new Cesium.WebMapServiceImageryProvider({
					url: layerUrl,
					layers: yearLayers[num],
					parameters: {
						format: 'image/png'
					},
					srs: 'EPSG:4326'
				})
			);
			var labelUrl="http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg"+"&tk="+'19b72f6cde5c8b49cf21ea2bb4c5b21e';
			this.$cp.labelProvider = viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
				url:labelUrl,
				layer: "tdtAnnoLayer",
				style: "default",
				maximumLevel:18,//天地图的最大缩放级别
				format: "image/jpeg",
				tileMatrixSetID: "GoogleMapsCompatible",
				show: false
			}));
			
		},
		handleCommand(command){
			if(command>2014){
				this.$cp.flyTo(118.39341322897816,28.99915797637111,18225,6.230930837705717,-1.0038512577964207,0.0004430322093735839)
			}else{
				this.$cp.flyTo(118.45059582312886,28.716521080976644,64025,6.230930673225966,-1.0038532599810397,0.0004432271954559752)
			}
			this.year = command;
			//rightImageryLayer["rightImageryLayer"+command].alpha = 1
			viewer.imageryLayers.remove(rightImageryLayer)
			rightImageryLayer = viewer.imageryLayers.addImageryProvider(
				new Cesium.WebMapServiceImageryProvider({
					url: layerUrl,
					layers: 'icenter:开化县'+ command +'-PNG-4326',
					parameters: {
						format: 'image/png'
					},
					srs: 'EPSG:4326'
				})
			)
			//右侧显示图像图层
			rightImageryLayer.splitDirection = Cesium.ImagerySplitDirection.RIGHT
		},
		compare(newV) {
			if (newV) {
				this.leftCompareRight(false)
			} else {
				viewer.scene.imagerySplitPosition = void 0
			}
		},
		leftCompareRight(check) {
			if (check) {
				this.compare(false)
				setTimeout(() => {
					window.rightViewer = DoubleSceneCompare.open(viewer)
				}, 0)
			} else {
				DoubleSceneCompare.close()
				delete window.rightViewer
			}
		},
		doubelEarthCompare() {
			//暂停播放
			this.clickPause()
			//开始对比
			this.isTextTips = !this.isTextTips 
			viewer.imageryLayers.remove(this.currentLayer)
			var that = this;
			if (this.isTextTips ) {
				this.duibinian = "取消对比年"
				viewer.container.children[2].style.width = "calc(50% - 2px)";
				viewer.container.children[3].style.width = "calc(50% - 2px)";
				leftImageryLayer = viewer.imageryLayers.addImageryProvider(
					new Cesium.WebMapServiceImageryProvider({
						url: layerUrl,
						layers: 'icenter:开化县'+ that.scaleArr[that.curIndex] +'-PNG-4326',//that.curIndex
						parameters: {
							format: 'image/png'
						},
						srs: 'EPSG:4326'
					})
				)
				// 左侧显示图像图层
				leftImageryLayer.splitDirection = Cesium.ImagerySplitDirection.LEFT

				
				// rightImageryLayer1 = viewer.imageryLayers.addImageryProvider(
				// 	new Cesium.WebMapServiceImageryProvider({
				// 		url: layerUrl,
				// 		layers: 'icenter:开化县1990-PNG-4326',
				// 		parameters: {
				// 			format: 'image/png'
				// 		},
				// 		srs: 'EPSG:4326'
				// 	})
				// )
				// //cp.imgProvider.alpha=0.1
				// // // 右侧显示图像图层
				// rightImageryLayer1.splitDirection = Cesium.ImagerySplitDirection.RIGHT
			} else {
				this.duibinian = "对比年"
				viewer.container.children[2].style.width = "100%";
				viewer.container.children[3].style.width = "0";
			}
		},
		//切换
		animation() {
			this.interval = setInterval(() => {
				this.startIndex++
				this.isArrive = true
				if (this.startIndex == this.layerArr.length) this.startIndex = 0
				this.moveSlider(this.startIndex)
				this.curIndex = this.startIndex
			}, 6500)
		},

		clickTop() {
			this.showTop = false
		},
		clickBottom() {
			this.showTop = true
		},
		removeSplit(){
			var slider = document.getElementById("slider");
			slider.style.display = "none";
			if(this.spllitHandler){
				this.spllitHandler.destroy();
			}
			if(this.layerSplit){
				this.layerSplit.splitDirection = Cesium.ImagerySplitDirection.NONE; 
				this.layerSplit.show = false
				viewer.imageryLayers.remove(this.layerSplit)
			}
		},
		splitLayer(leftOption,rightOption){
			viewer.entities.removeAll();
			var layers = viewer.imageryLayers;
			this.layerSplit = layers.addImageryProvider(
				leftOption
			);
			this.layerSplit.splitDirection = Cesium.ImagerySplitDirection.LEFT; // Only show to the left of the slider.
			this.layerSplit1 = layers.addImageryProvider(
				rightOption
			);
			this.layerSplit1.splitDirection = Cesium.ImagerySplitDirection.Right; 
			// Sync the position of the slider with the split position
			var slider = document.getElementById("slider");
			slider.style.display = "block";
			viewer.scene.imagerySplitPosition =
			slider.offsetLeft / slider.parentElement.offsetWidth;

			var handler = new Cesium.ScreenSpaceEventHandler(slider);
			this.spllitHandler = handler;
			var moveActive = false;

			function move(movement) {
				if (!moveActive) {
					return;
				}
				var relativeOffset = movement.endPosition.x;
				var splitPosition =
					(slider.offsetLeft + relativeOffset) /
					slider.parentElement.offsetWidth;
				slider.style.left = 100.0 * splitPosition + "%";
				viewer.scene.imagerySplitPosition = splitPosition;
			}

			handler.setInputAction(function () {
				moveActive = true;
			}, Cesium.ScreenSpaceEventType.LEFT_DOWN);

			handler.setInputAction(function () {
				moveActive = true;
			}, Cesium.ScreenSpaceEventType.PINCH_START);

			handler.setInputAction(move, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

			handler.setInputAction(move, Cesium.ScreenSpaceEventType.PINCH_MOVE);

			handler.setInputAction(function () {
				moveActive = false;
			}, Cesium.ScreenSpaceEventType.LEFT_UP);

			handler.setInputAction(function () {
				moveActive = false;
			}, Cesium.ScreenSpaceEventType.PINCH_END);
		},
	},
	destroyed() {
		//清除双球
		this.leftCompareRight(false)
		viewer.imageryLayers.remove(leftImageryLayer)
		viewer.imageryLayers.remove(rightImageryLayer)
		
		this.isPause = false;
		this.clickPause();
		viewer.imageryLayers.remove(this.currentLayer);
	}
}
</script>
<style lang="stylus" scoped>
@import '../../assets/css/varibles.styl'
.wrapperHide {
	bottom: -70px !important;
	transition-duration: 500ms;
}
.wrapperShow {
	bottom: 43px !important;
	transition-duration: 500ms;
}
.timeLineWrapper {
	width: vw(1718);
	height:vh(120);
	display:flex 
	align-items:center
	position: absolute;
	z-index:100
	left:0;
	bottom:0;
	border-radius: 30px;
	background:url("/images/sanshitiao.png") no-repeat
	background-size:cover
	.cursor-pointer {
		cursor: pointer;
	}
	.kaihuaThirty{
		width:vw(180)
		height:vh(78)
		margin-left:vw(30)
		div{
			width:vw(180)
			height:vh(78)
			background:url("/images/kaihua30.png") no-repeat
			background-size:cover 
		}
	}
	.yearCompear{
		margin-left:vw(210)
		.yearBtn{
			display:inline-block;
			width:vw(128);
			height:vh(70);
			line-height:vh(70);
			font-size:vw(20);
			text-align:center;
			background:url("/images/duibinian.png") no-repeat
			background-size:cover 
			cursor:pointer  
		}
	}
	.textTips{
		position:fixed;
		width:100vw;
		line-height:vh(40);
		font-size:vw(30);
		top:vh(100);
		left:0;
		display:flex
		color:#00dcff
		.picTextBefore{
			flex:1;
			text-align:center;
		}
		.picTextAfter{
			flex:1;
			.picTextBtn{
				left:45%;
				color:#00dcff;
				font-size:vw(30);
			}
		}
	}
	.bar {
		text-align: center;
		position: absolute;
	}
	.bar-top {
		cursor: pointer;
		position: absolute;
		top: -19px;
		left: calc(50% - 40px);
		// transform: translate(-50%, 50%);
	}
	.bar-bottom {
		position: absolute;
		bottom: -23px;
		left: calc(50% - 40px);
		// transform: translate(-37%, 50%);
	}
	.timeContent {
		height: 34px;
		margin-left:vw(50)
		margin-top:vh(20)
		.control {
			display: inline-block;
			float: left;
		}
		.fa {
			font-size: 25px;
		}
		i {
			display: block;
			width: 20px;
			height: 20px;
			color: #fff;
		}
		i:nth-child(1),
		i:nth-child(2),
		i:nth-child(3) {
			float: left;
			margin-left: 10px;
			margin-right: 10px;
			text-align: center;
		}
		i.clickActive {
			color: #00dcff;
		}
		.progress {
			height: 20px;
			float: left;
			position: relative;
			left:vw(30)
			.sliderBlock {
				display: flex;
				li {
					flex: 1;
					height: 20px;
					display: flex;
					flex-direction: column;
					span {
						display: block;
						width: 67px;
						height: 10px;
					}
					span:nth-child(1) {
						display: block;
						height: 4px;
						border-right: 1px solid transparent;
						span {
							display: block;
							width: 10px;
							height: 10px;
							border-radius: 5px;
							background-color: #fff;
							margin-left: -4px;
							margin-top: -3px;
						}
						span:nth-child(2) {
							float: right;
							position: relative;
							top: -7px;
							left: 4px;
						}
					}
					.hasArrive {
						background: #00dcff;
					}
					.noArrive {
						background: transparent;
					}
					span:nth-child(2) {
						height: 16px;
						border: none;
						color: #011740;
						text-align: left;
						font-size: 12px;
						.i-before {
							font-style: normal;
							width: 60px;
							margin-left: -30px;
							margin-top: 30px;
						}
						.i-last {
							font-style: normal;
							width: 60px;
							float: right;
							// margin-left: 0px;
							margin-top: -20px;
							margin-right: -26px;
						}
					}
				}
				li:nth-child(1) {
					span:nth-child(1) {
						//border-left: 1px solid #00DCFF;
					}
				}
			}
			.text {
				color: #fff;
				position: absolute;
				top: -10px;
				left: -34px;
				font-size: 14px;
				width: 70px;
				display: none;
				// background-image: url('../../static/img/point.png')
			}

			.slider {
				display: block;
				width: vw(50);
				height: vw(50);
				line-height:vw(50)
				border-radius: 16px;
				text-align:center
				background: #00dcff;
				background:url("/images/slider.png") no-repeat;
				background-size:cover;
				position: absolute;
				top: -23px;
				left: -25px;
			}
			.popup {
				position: absolute;
				right: 0;
				bottom: 16px;
				transform: translateX(50%);
				width: 60px;
				font-size: 12px;
				line-height: 24px;
				color: #fff;
				background-color: #319ade;
				text-align: center;
				border-radius: 5px;
			}
			.popup::after {
				content: '';
				position: absolute;
				left: 22px;
				top: 100%;
				border-top: 8px solid #319ade;
				border-left: 8px solid transparent;
				border-right: 8px solid transparent;
			}
		}
	}
}
</style>
